import React, { Component } from 'react'
import './index.css'

export default class Footer extends Component {
    render() {
        const { todos } = this.props;
        //计算已完成数量，可以使用reduce替代
        /* let num = 0;
        todos.forEach(item => {
            if (item.done) {
                num++;
            }
        }) */

        /* const num = todos.reduce((p, c) => {
            // if (c.done) {
            //    p += 1;
            //}
            //return p;

            // c.done ? p += 1 : p += 0;
            // return p;

            return c.done ? p + 1 : p + 0;
        }, 0) */

        const num = todos.reduce((p, c) => c.done ? p + 1 : p + 0,0)


        return (
            //num === todos.length && num !== 0  没有任务的时候，全选框不勾选
            <div className='todo-footer'>
                <label>
                    <input type="checkbox" onChange={this.checkAll} checked={num === todos.length && num !== 0} />
                </label>
                <span>
                    <span>已完成{num}</span> /全部{todos.length}
                </span>
                <button onClick={this.deleteAll} className='btn btn-danger'>清除已完成任务</button>
            </div>
        )
    }

    deleteAll = () => {
        const { deleteAllTodo } = this.props;
        //调用App组件的删除已完成方法
        deleteAllTodo();
    }

    checkAll = (e) => {
        const { changeAll } = this.props;
        //点击完成获取当前要改变的状态
        changeAll(e.target.checked);

    }
}


